import React from "react";
import { apiRegister } from "../../api";
import { registerDataType } from "../../interface";
import { Form, Input, Button, message } from "antd";
import { useNavigate } from "react-router-dom";
import "./style.css";

const Register = () => {
  const navigate = useNavigate();

  const onFinish = (data: registerDataType) => {
    apiRegister(data).then((res: any) => {
      if (res.code === 1) {
        message.success(res.msg);
      } else {
        message.info(res.msg);
      }
    });
    console.log(data);
  };

  return (
    <div className="container">
      <div className="box">
        <div className="aa">
          <h2>欢迎！</h2>

          <h3>欢迎宏烨找房管理后台</h3>

          <Button className="zhuce">
            <a href="../Login">登录</a>
          </Button>
        </div>
        <div className="login">
          <div className="a">
            <h2>注册</h2>
            <Form name="basic" onFinish={onFinish} autoComplete="off">
              <Form.Item
                label="账户"
                name="username"
                rules={[{ required: true, message: "请输入账户" }]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="密码"
                name="password"
                rules={[{ required: true, message: "请输入密码" }]}
              >
                <Input.Password />
              </Form.Item>

              <Form.Item
                label="确认"
                name="okPassword"
                rules={[
                  // 非空验证
                  { required: true, message: "请再次输入您的密码" },
                  // 自定义验证 二次确认密码，自定义输入条件
                  (form) => ({
                    // value: 当前表单组件输入的内容
                    validator: (_, value) => {
                      if (form.getFieldValue("password") === value || !value) {
                        return Promise.resolve();
                      } else return Promise.reject("两次输入的内容不一致");
                    },
                  }),
                ]}
              >
                <Input.Password />
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit">
                  注册
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Register;
